<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<link rel="stylesheet" href="jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</head>
<style type="text/css"> 

html { 
      background: url(paisajes-playas-palmeras.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

body {
	font-family:Tahoma, Geneva, sans-serif;
}

.contenido {
	width:460px;
	margin:0 auto;
}


#resultado
{
	text-align: right;
	width: 90%;
}
.boton {
	
	margin-right:10px;
	margin-top:3px;
	width:130px;
	height:20px;
	background:#222;
	color:#fff;
	cursor:pointer;
	text-align:center;
}

.boton:hover{color: red}

.ventana{

	display:none;      
	font-family:Arial, Helvetica, sans-serif;
	color:#808080;
	line-height:28px;
	font-size:15px;
	text-align:justify;


}



</style>
<div class="row">
   
    <div class="span12">
        
        <div class="well" id="panelmain">
             <div>
         <div id="b2" class="boton">Calculadora</div>
            <div id="dialogo2" class="ventana"  title="Calculadora">
			
			<table align='center' border='1' id='calculadora'>
		<tr height='30px' align='center'>
			<td colspan='100%'><input type='text' id='resultado' name='resultado' readonly></td>
		</tr>
		<tr height='50px'>
			<td align='center' width='25%'><input type='button' id='1' name='1' value='1' class='botones'></td>
			<td align='center' width='25%'><input type='button' id='2' name='2' value='2' class='botones'></td>
			<td align='center' width='25%'><input type='button' id='3' name='3' value='3' class='botones'></td>
			<td align='center' width='25%'><input type='button' id='res' name='res' value='-' class='botones'></td>
			<td align='center' width='25%'></td>
		</tr>
		<tr height='50px'>
			<td align='center' width='25%'><input type='button' id='4' name='4' value='4' class='botones'></td>
			<td align='center' width='25%'><input type='button' id='5' name='5' value='5' class='botones'></td>
			<td align='center' width='25%'><input type='button' id='6' name='6' value='6' class='botones'></td>
			<td align='center' width='25%'><input type='button' id='sum' name='sum' value='+' class='botones'></td>
		</tr>
		<tr height='50px'>
			<td align='center' width='25%'><input type='button' id='7' name='7' value='7' class='botones'></td>
			<td align='center' width='25%'><input type='button' id='8' name='8' value='8' class='botones'></td>
			<td align='center' width='25%'><input type='button' id='9' name='9' value='9' class='botones'></td>
			<td align='center' width='25%'><input type='button' id='mul' name='mul' value='*' class='botones'></td>
		</tr>
		<tr height='50px' align='center'>
			<td align='center' width='25%'><input type='button' id='calcular' name='calcular' value='=' class='botones'></td>
			<td align='center' width='25%'><input type='button' id='0' name='0' value='0' class='botones'></td>
			<td align='center' colspan='2'><input type='button' id='limpiar' name='limpiar' value='limpiar' class='botones'></td>
		</tr>
	</table>
	<input type='hidden' id='numero1' name='numero1' value=''>
	<input type='hidden' id='numero2' name='numero2' value=''>
	<input type='hidden' id='action' name='action' value=''>
		
		</div>
            </br>
    </div>
           
            <h3 style="text-align: center">Operaciones</h3></br>
             <?php if( ($resp = Model3_Site::getTempMsg("msg")) ) { ?>
                <div class="alert alert-success">
                    <a class="close" data-dismiss="alert">×</a>
                    <?php echo $resp; ?>
                </div>
            <?php } ?>
            <div class="content_main">
                <?php $view->Operations()->renderTable($view->operations); ?>
            </div>
        </div>
        
        <div class="well" id="details" style="display: none;">
            <h3>Detalle de la operaci&oacute;n:</h3>
            <div class="details">
            </div>
            <div class="control-group">
                <div class="controls" align="right">
                    <button class="btn btn-primary" type="button" id="closeDetails">Regresar</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript"> 
	
		
$(document).ready(function(){ <!-- --------> ejecuta el script jquery cuando el documento ha terminado de cargarse -->
	$("#b1").click(function() { <!-- ------> al pulsar (.click) el boton 1 (#b1) -->
		$("#dialogo").dialog({ <!--  ------> muestra la ventana  -->
			width: 590,  <!-- -------------> ancho de la ventana -->
			height: 350,<!--  -------------> altura de la ventana -->
			show: "scale", <!-- -----------> animación de la ventana al aparecer -->
			hide: "scale", <!-- -----------> animación al cerrar la ventana -->
			resizable: "false", <!-- ------> fija o redimensionable si ponemos este valor a "true" -->
			position: "center",<!--  ------> posicion de la ventana en la pantalla (left, top, right...) -->
			modal: "true" <!-- ------------> si esta en true bloquea el contenido de la web mientras la ventana esta activa (muy elegante) -->
		});
	});
$("#b2").click(function() {
	$("#dialogo2").dialog({
			width: 590,
			height: 350,
			show: "scale",
			hide: "scale",
			resizable: "false",
			position: "center"		
		});
	});
$("#b3").click(function() {
		$("#dialogo3").dialog({
			width: 590,
			height: 350,
			show: "blind",
			hide: "shake",
			resizable: "false",
			position: "center"		
		});
	});
});
	
	//FUNCION CAMBIAR COLOR;
	function cambiar_color(i)
	{
		$("#"+i).css("background","yellow");
		setTimeout(function (){ $("#"+i).css("background","white"); }, 100);
	}

	//FUNCION QUE LA SUMA
	$(document).keydown(function(a)
	{
		resultado=$("#resultado").val();
		key=(a.keyCode);
		
		///////////SI PRESIONO LAS TECLAS CORRESPONDIENTES A NUMEROS/////////////
		if(key==96)
		{
			resultado=resultado+'0';
			cambiar_color(0);
			$("#resultado").val(resultado);
		}
		
		if(key==97)
		{
			resultado=resultado+'1';
			cambiar_color(1);
			$("#resultado").val(resultado);
		}

		if(key==98)
		{
			resultado=resultado+'2';
			cambiar_color(2);
			$("#resultado").val(resultado);
		}
		
		if(key==99)
		{
			resultado=resultado+'3';
			cambiar_color(3);
			$("#resultado").val(resultado);
		}

		if(key==100)
		{
			resultado=resultado+'4';
			cambiar_color(4);
			$("#resultado").val(resultado);
		}
	
		if(key==101)
		{
			resultado=resultado+'5';
			cambiar_color(5);
			$("#resultado").val(resultado);
		}
	
		if(key==102)
		{
			resultado=resultado+'6';
			cambiar_color(6);
			$("#resultado").val(resultado);
		}

		if(key==103)
		{
			resultado=resultado+'7';
			cambiar_color(7);
			$("#resultado").val(resultado);
		}

		if(key==104)
		{
			resultado=resultado+'8';
			cambiar_color(8);
			$("#resultado").val(resultado);
		}

		if(key==105)
		{
			resultado=resultado+'9';
			cambiar_color(9);
			$("#resultado").val(resultado);
		}
		////////////////////////////////////////////////////////////////////////


		///////////////SI PRESIONA LAS TECLAS DE ACCIONES///////////////////////
		//SI PRESIONO SUMAR
		if(key==107)
		{
			$("#numero1").val(resultado);
			$("#resultado").val('');
			$("#action").val('1');
			cambiar_color("sum");
		}

		//RESTAR
		if(key==109)
		{
			$("#numero1").val(resultado);
			$("#resultado").val('');
			$("#action").val('2');
			cambiar_color("sum");
		}

		//multiplicar
		if(key==106)
		{
			$("#numero1").val(resultado);
			$("#resultado").val('');
			$("#action").val('3');
			cambiar_color("mul");
		}

		//dividir
		if(key==111)
		{
			$("#numero1").val(resultado);
			$("#resultado").val('');
			$("#action").val('4');
			cambiar_color("div");
		}

		//limpiar
		if(key==46)
		{
			$("#resultado").val('');
			$("#numero1").val('');
			$("#numero2").val('');
			$("#action").val('');
			cambiar_color("limpiar");
		}

		////////////////////////////////////////////////////////////////////////

		//SI PRESIONA ENTER O LA BARRA ESPACIADORA
		if((key==32)||(key==13))
		{
			//EXTRAEMOS LOS NUMEROS Y  VEMOS LAS ACCIONES

			$("#numero2").val(resultado);
			$("#resultado").val();
			numero1=parseFloat($("#numero1").val());
			numero2=parseFloat($("#numero2").val());
			action =$("#action").val();

			if(action==1)
			resultado=numero1+numero2;
			
			if(action==2)
			resultado=numero1-numero2;
			
			if(action==3)
			resultado=numero1*numero2;

			if(action==4)
			resultado=numero1/numero2;

			//REASIGNAMOS VALOR
			$("#resultado").val(resultado);
			cambiar_color("calcular");
		}
	});
	</script>
	